<template>
  <div class="tl-rl">
    <template :table="table">
      <el-table
        style="width:100%"
        v-loading="table.loading"
        :data="table.data"
        :border="table.border"
        @sort-change="handleSortChange"
        @selection-change="handleSelectionChange"
        @select="handleSelected"
        ref="TlRlTable"
        key="TlRlTable"
      >
        <el-table-column
          type="selection"
          width="55"
          :selectable="table.selectable"
          v-if="table.selectionChange"
        >
        </el-table-column>
        <template v-for="item in table.tr">
          <el-table-column
            v-if="item.show !== false && item.show === 'template'"
            :label="item.label"
            :class-name="item.className ? item.className : ''"
            :key="item.id"
            :width="item.width ? item.width : ''"
            :min-width="item.minWidth ? item.minWidth : ''"
            :sortable="item.sortable ? 'custom' : false"
            align="center"
          >
            <template slot-scope="scope">
              <slot
                :name="item.prop"
                :obj="scope"
              ></slot>
            </template>
          </el-table-column>

          <el-table-column
            v-else-if="item.show !== false && item.show !== 'template'"
            :label="item.label"
            :prop="item.prop"
            :class-name="item.className ? item.className : ''"
            :key="item.id"
            :width="item.width ? item.width : ''"
            :min-width="item.minWidth ? item.minWidth : ''"
            :sortable="item.sortable ? 'custom' : false"
            align="center"
          >
          </el-table-column>
        </template>
        <el-table-column
          column-key="operation"
          :label="table.operation.label"
          :width="table.operation.width ? table.operation.width : ''"
          :min-width="table.operation.minWidth ? table.operation.minWidth : ''"
          :class-name="table.operation.className"
          v-if="table.hasOperation"
          align="center"
        >
          <template slot-scope="scope">
            <el-button
              v-for="item in table.operation.data"
              :class="item.classname ? item.classname : ''"
              :key="item.id"
              :size="item.size"
              @click="handlebutton(scope.$index, scope.row, item.id)"
            >{{ item.label }}</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
  </div>
</template>
<script>
import format from "date-format";
export default {
  props: {
    table: {
      default() {
        return {
          loading: false, //有无动画
          border: false, //有无边框
          sortChange: "handleSortChange", //排序
          selected: "handleSelected",
          selectionChange: "handleSelectionChange", //选择
          selectable: false,
          hasOperation: false, //有无操作功能
          tr: [
            {
              id: "1",
              label: "label",
              prop: "prop",
              className: "classname",
              minWidth: "80",
              show: true,
              sortable: true
              // show有三种值：false隐藏当前列，true常规表格列，template自定义表格列
              //          <template slot-scope="props" slot="example">
              //                <a class="list-a" target="_blank" :href="'/#/bombscreen?mobile=' + props.obj.row.mobile">{{ props.obj.row.username }}</a>
              //          </template>
            }
          ],
          operation: {
            // label: "操作",
            // width: "200",
            // className: "",
            // data: [
            //   {
            //     label: "通过", //按钮文字
            //     Fun: "hadnleSubmit", //父组件事件
            //     id: "1", //按钮key值
            //     classname: "show" //按钮类名
            //   }
            // ]
          }
        };
      }
    }
  },
  methods: {
    handlebutton(a, b, id) {
      const data = this.table.operation.data;
      for (let i = 0; i < data.length; i++) {
        if (id === data[i].id) {
          //父组件自定义事件 例如 <Table :table="table" @view="view"></Table>
          this.$emit(data[i].Fun, a, b);
        }
      }
    },
    handleSortChange(val) {
      const data = this.table.sortChange;
      this.$emit(data, val);
    },
    handleSelected(val) {
      const data = this.table.selected;
      this.$emit(data, val);
    },
    handleSelectionChange(val) {
      const data = this.table.selectionChange;
      this.$emit(data, val);
    },
    //时间格式化
    formatterTime(row, column) {
      if (row.detectionTime) {
        const newTime = format(
          "yyyy-MM-dd hh:mm:ss",
          new Date(row.detectionTime)
        ).split(" ");
        let time = "";
        time += newTime[0] + "\n" + newTime[1];
        return time;
      } else {
        return "";
      }
    }
  }
};
</script>
